<!DOCTYPE html>
<html>
  <head>
    <title>Rhizosphere : Multisphere</title>
    <!-- Rhizosphere libraries and styles -->
    {% include "rhizo_head.html" %}
    <style>
      * {
        font-family: sans-serif;
      }

      H1 {
        margin: 0.2em 0;
        padding: 0;
        font-size: 1.2em;
      }

      P.tagline {
        margin: 0 0 0.2em 0;
        color: #999;
        font-size: 0.8em;
      }

      .bluelight {
        color: #6b90da;
      }

      .rhizo-multi {
        position: relative;
        height: 300px;
        width: 100%;
        margin-bottom: 10px;
        border-top: 1px solid #7aa5d6;
        border-bottom: 1px solid #7aa5d6;
      }
    </style>
    {% include "ga.html" %}
  </head>
  <body>
    <h1><span class="bluelight">Multi</span>sphere</h1>
    <p class="tagline">
      Multiple Rhizosphere instances in a single webpage.<br />
      No IFrames. Rhizosphere library loaded only once. Each instance lives in its own scope.
    </p>
    <div id="rhizo-first" class="rhizo-multi"></div>
    <div id="rhizo-second" class="rhizo-multi"></div>
    <div id="rhizo-third" class="rhizo-multi"></div>

    <script type="text/javascript" charset="utf-8">
      var uas = [];
      $(document).ready(function() {
        var divs = ['#rhizo-first', '#rhizo-second', '#rhizo-third'];
        var samples = ['sample/picasa.js', 'sample/people.js', 'sample/books.js' ];
        for (var i = 0; i < divs.length; i++) {
          uas.push(new rhizo.bootstrap.Bootstrap(
              $(divs[i]),
              {
                logLevel: {% if logLevel %}'{{ logLevel }}'{% else %}null{% endif %},
                template: 'bottom',
                platform: 'default',
                device: 'default'
              }).prepareAndDeploy(samples[i]));
        }
      });
    </script>
  </body>
</html>
